﻿@{
    ViewBag.Title = "Index";
    Layout = "~/Areas/Admin/Views/Shared/_Layout.cshtml";
}
<div id="divMsgIndex"></div>
<p>
    @Html.ActionLink("Create New", "Create", null, new { id = "btnAdd" })
</p>


<div class="form-group">
    <div class="col-lg-3">
        <input id="TXTSearchString" type="text" placeholder="Search Box" class="form-control">
    </div>
    <a id="btnSearch" class="btn btn-sm btn-default">Search</a>
</div>
<div class="widget">
    <div class="widget-head">
        <div class="pull-left">Topic</div>
        <div class="clearfix"></div>
    </div>

    <div class="widget-content">
         <div id="NoRecord"></div>
        <table class="table table-striped table-bordered table-hover" id="TopicTable">
            <thead>
                <tr data-bind="click: sortTable">
                    <th data-column="TopicName" class="sorting" role="columnheader" rowspan="1" colspan="1"  data-bind="attr: { class:currentColumn() == 'TopicName'? iconType :'sorting' }">Name</th>
                    <th data-column="SubjectName" class="sorting" role="columnheader" rowspan="1" colspan="1"  data-bind="attr: { class:currentColumn() == 'SubjectName'? iconType :'sorting' }">Subject</th>
                    <th data-column="Status" class="sorting" role="columnheader" rowspan="1" colspan="1"  data-bind="attr: { class:currentColumn() == 'Status'? iconType :'sorting' }">Status</th>
                    <th data-column="UserName" class="sorting" role="columnheader" rowspan="1" colspan="1"  data-bind="attr: { class:currentColumn() == 'UserName'? iconType :'sorting' }">User</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody data-bind="foreach: pageData()" style="margin-top: 50px">
        <tr>
            <td data-bind="text: TopicName"></td>
            <td data-bind="text: SubjectName"></td>
             <td>
                <span data-bind="attr: { class : Status() == true ? 'label label-success' : 'label label-danger' }" id="statusspan"><span data-bind="text:Status()==true?'Active':'Block'"></span></span>
            </td>
            <td data-bind="text: UserName"></td>
            <td>
                <a data-bind="event: { click: EditData }" class="fa fa-edit" href="javascript:void(0);" title="Edit Record"></a> |
                <a data-bind="event: { click: DeleteData }" class="fa fa-times"  href="javascript:void(0);" title="Delete Record"></a>
                
            </td>
        </tr>
    </tbody>
        </table>

        <div class="widget-foot" id="paging">
            <ul class="pagination pagination-sm pull-right">
                 <li><a id="FirstPageButton" href="javascript:void(0)">First</a></li>
                 <li><a id="prevPageButton" href="javascript:void(0)">Prev</a></li>
                <li data-bind="foreach: ko.utils.range(1, pager())"><a data-bind="attr: {text :  $data }, text : $data" href="javascript:void(0)"  class="pageNumber"></a></li>
                <li><a  id="nextPageButton"  href="javascript:void(0)">Next</a></li>
                 <li><a id="LastPageButton" href="javascript:void(0)">Last</a></li>
            </ul>
            <div class="clearfix"></div>
        </div>
    </div>
</div>
    
@section scripts{
    <script type="text/javascript">
        function HideTable() {
            $("#TopicTable").hide();
            $('#paging').hide();
            $('#NoRecord').html('<img src="../img/Fillingbrokenring.gif"> loading...');
            var table = document.getElementById("TopicTable");
            var rowCount = table.rows.length;
            if (rowCount < 2) {
                $('#NoRecord').show();
                showMsg('NoRecord', 'No Record available', 'info');
            }
        }
        function ShowTable() {
            var table = document.getElementById("TopicTable");
            var rowCount = table.rows.length;
            $('#NoRecord').hide();
            $("#TopicTable").show();
            $('#paging').show();

        }
        $(document).ready(function () {
            HideTable();
            $('#h2Title').html("<i class='fa fa-comments-o'></i> Topic");
            $('#aTitle').html("Topic");
            $('#liTopic').addClass("open");
            $.ajaxSetup({ cache: false });
            EditData = function (obj, event) {
                $("#modalContent").load('/Admin/Topic/Edit?TopicID=' + obj.TopicID(), function () {
                    $('#modalDiv').modal({
                        backdrop: 'static',
                        keyboard: true
                    }, 'show');
                });
            }
            DeleteData = function (obj, event) {
                $("#modalContent").load('/Admin/Topic/Delete?TopicID=' + obj.TopicID(), function () {
                    $('#modalDiv').modal({
                        backdrop: 'static',
                        keyboard: true
                    }, 'show');
                });
            }

            $("#btnAdd").click(function (e) {
                e.preventDefault();
                $("#modalContent").load(this.href, function () {
                    $('#modalDiv').modal({
                        backdrop: 'static',
                        keyboard: true
                    }, 'show');
                });
                return false;
            });
        });
       
        var loadPage = function (pageNumber, pageSize, searchString) {
            $.ajax({
                url: "/Admin/Topic?pageNumber=" + pageNumber + "&pageSize=" + pageSize + "&searchString=" + searchString + "&pgindex=10&columnFilter=" + '',
                type: "POST",
                success: function (data) {
                    if (vm == null) {
                        vm = new viewModel(data);
                        if ((vm.maxPageIndex() + 1) >= 5) {
                            $("#nextPageButton").css({"display":"initial"});
                        }
                        ko.applyBindings(vm);
                        if (data.Data.length == 0) {
                            HideTable();
                        }
                        else {
                            ShowTable();
                        }
                        return data.Data.length;
                    }
                    else {
                        vm.pageData(ko.observableArray());
                        vm.pageData(ko.mapping.fromJS(data.Data));
                        vm.maxPageIndex(Math.ceil(data.RecordCount / $("#rowsPerPage").val()) - 1);
                        if ((vm.maxPageIndex() + 1) <= 5) {
                            $("#prevPageButton").css({"display":"none"});
                            $("#nextPageButton").css({"display":"none"});
                        }
                        else if ((vm.maxPageIndex() + 1) >= 5 && !vm.isLastPage()) {
                            $("#nextPageButton").css({"display":"intial"});
                        }
                        else if ((vm.maxPageIndex() + 1) >= 5 && !vm.isFirstPage()) {
                            $("#prevPageButton").css({"display":"intial"});
                        }
                        if (data.Data.length == 0) {
                            HideTable();
                        }
                        else {
                            ShowTable();
                        }
                        return data.Data.length;
                    }
                }
            });
        }
    </script>
}@Scripts.Render("~/bundles/pagedlist")